// src/views/data/Antv.tsx
import { FC, useEffect } from 'react';
import { Chart } from '@antv/g2';
interface IAntvProps { };
const Antv: FC<IAntvProps> = () => {
    useEffect(() => {
        const data = [
            { year: '1951 年', sales: 38 },
            { year: '1952 年', sales: 52 },
            { year: '1956 年', sales: 61 },
            { year: '1957 年', sales: 145 },
            { year: '1958 年', sales: 48 },
            { year: '1959 年', sales: 38 },
            { year: '1960 年', sales: 38 },
            { year: '1962 年', sales: 38 },
        ];
        const chart = new Chart({
            container: 'container',
            autoFit: true
        });
        chart.data(data);
        chart.scale('sales', {
            nice: true,
        });
        chart.tooltip({
            showMarkers: false
        });
        chart.interaction('active-region');
        chart.interval().position('year*sales');
        chart.render();
    }, [])

    return (
        <>
            <h1>Antv</h1>
            <div id="container" style={{ width: 600, height: 400, backgroundColor: '#efefef' }}></div>
        </>
    )
};

export default Antv